<template>
    <div :id="item.createdAt" style="width: 100%;margin-bottom: 16px;">
        <div v-if="item.topTitle"
            style="width: 100%;text-align: center;font-size: 12px;margin-bottom: 8px;margin-top: 8px;" :style="{
                color: tool.getThemeColor('message.right.color')
            }">
            {{ item.topTitle }}
        </div>
        <div v-if="item.type === 1" style="width: 100%;">

            <div v-if="item.senderType === 1" style="width: 100%;padding-left: 20%;text-align: right;">
                <div style="width: auto;padding: 12px;border-radius: 16px;word-break: break-all;display: inline-block;text-align: left;white-space: pre-wrap"
                    :style="{
                        backgroundColor: tool.getThemeColor('message.right.bg'),
                        color: tool.getThemeColor('message.right.color')
                    }">
                    {{ item.message }}
                </div>
                <div style="width: 100%;text-align: right;font-size: 10px;color: gray;margin-top: -4px;opacity: 0.3;"
                    :style="{
                        color: tool.getThemeColor('message.right.color')
                    }">
                    {{ tool.formatTimeNew(new Date(item.createdAt)) }}
                </div>
            </div>
            <div v-if="item.senderType === -1"
                style="width: 100%;padding-right: 0%;text-align: left;white-space: pre-wrap" :style="{
                    color: tool.getThemeColor('message.right.color')
                }">
                {{ item.message }}
                <div style="width: 100%;text-align: left;font-size: 10px;color: gray;opacity: 0.3;" :style="{
                    color: tool.getThemeColor('message.right.color')
                }">
                    {{ tool.formatTimeNew(new Date(item.createdAt)) }}
                </div>
            </div>
            <div v-if="item.senderType === 0" style="width: 100%;text-align: center;padding: 0 16px;" :style="{
                color: tool.getThemeColor('message.right.color')
            }">
                <span
                    style="font-size: 12px;padding: 4px 10px;line-height: 40px;border-radius: 12px;word-break: break-all;white-space: pre-wrap"
                    :style="{
                        backgroundColor: tool.getThemeColor('message.center.bg')
                    }">{{
                        item.message }}</span>
            </div>
        </div>

        <div v-if="item.type === 2" style="width: 100%;" :style="{
            color: tool.getThemeColor('message.right.color')
        }">
            <p><span>{{ item.message }}</span></p>
            <p><span>{{ item.questionInfo.stems }}</span></p>
            <img v-if="item.questionInfo.img" :src="item.questionInfo.img" alt="">
            <div v-if="item.questionInfo.type === '选择'">
                <p>
                    <span>A. </span>
                    <span v-if="item.questionInfo.optionAType !== 'image'">{{ item.questionInfo.optionA }}</span>
                    <img v-else :src="item.questionInfo.optionA" alt="">
                </p>
                <p>
                    <span>B. </span>
                    <span v-if="item.questionInfo.optionBType !== 'image'">{{ item.questionInfo.optionB }}</span>
                    <img v-else :src="item.questionInfo.optionB" alt="">
                </p>
                <p>
                    <span>C. </span>
                    <span v-if="item.questionInfo.optionCType !== 'image'">{{ item.questionInfo.optionC }}</span>
                    <img v-else :src="item.questionInfo.optionC" alt="">
                </p>
                <p>
                    <span>D. </span>
                    <span v-if="item.questionInfo.optionDType !== 'image'">{{ item.questionInfo.optionD }}</span>
                    <img v-else :src="item.questionInfo.optionD" alt="">
                </p>
            </div>
            <div style="width: 100%;text-align: left;font-size: 10px;color: gray;opacity: 0.3;" :style="{
                color: tool.getThemeColor('message.right.color')
            }">
                {{ tool.formatTimeNew(new Date(item.createdAt)) }}
            </div>
        </div>

    </div>
</template>

<script setup>
import { ref, reactive, defineProps, computed, watch, onMounted, onBeforeUnmount } from 'vue'
import tool from '../tool'

const props = defineProps({
    item: {
        type: Object,
        default: {}
    }
})

onMounted(async () => {

})

</script>

<style scoped></style>